<template>
	<div class="list-config">

        <div class="tab-content">
            <!-- 发布到APP -->
            <div class="form-item-box clearfix">
                <div class="form-item-left code-left title-channel">发布到APP:</div>
                <div class="form-item-right code-switch">
                    <el-switch
                        v-model="$store.state.shares.implantApp"
                        active-color="#64bd63"
                        inactive-color="#ffffff">
                    </el-switch>
                </div>
            </div>
            <div v-show="$store.state.shares.implantApp">
                <div class="form-item-box clearfix" >
                    <div class="form-item-left require-item">APP下载链接:</div>
                    <div class="form-item-right">
                        <input type="text" v-model="$store.state.shares.appDownloadUrl" placeholder="配置下载链接">
                    </div>
                </div>
                <!--<div class="form-item-box clearfix" >
                    <div class="form-item-left">IOS包名:</div>
                    <div class="form-item-right">
                        <input type="text" v-model="$store.state.shares.appDownloadUrl" placeholder="配置ios包名">
                    </div>
                </div>
                <div class="form-item-box clearfix" >
                    <div class="form-item-left">ANDROID包名:</div>
                    <div class="form-item-right">
                        <input type="text" v-model="$store.state.shares.appDownloadUrl" placeholder="配置Android包名">
                    </div>
                </div>-->
            </div>
            
            <!-- 发布到微信 -->
            <div class="form-item-box clearfix">
                <div class="form-item-left code-left title-channel">发布到微信:</div>
                <div class="form-item-right code-switch">
                    <el-switch
                        v-model="$store.state.shares.implantWechat"
                        active-color="#64bd63"
                        inactive-color="#ffffff"
                        @change="openImplantWx"
                        >
                    </el-switch>
                </div>
            </div>
            <div class="form-item-box clearfix" v-show="$store.state.shares.implantWechat">
                <div class="form-item-left  code-left">上传二维码:</div>
                <div class="form-item-right add-banner">
                   
                    <div class="upload-img-list">
                        <p  v-show="!$store.state.shares.codeImg" @click="clickUpAttr(1)" >
                            <input type="file" 
                                @change='addImgEvent'
                                accept="image/png, image/jpeg, image/jpg">
                            <img v-show="ImportCodeLoading" class="load-gif" src="./../../../assets/img/qr_code.gif">
                        </p>
                        <p v-show="$store.state.shares.codeImg" class="p_img">
                            <img :src="$store.state.shares.codeImg" />
                            <i class="fa fa-times" 
                            aria-hidden="true"
                            v-show="$store.state.shares.codeImg"  @click="cancelBanner(1)"></i>
                        </p>
                    </div>
                    <p style="font-size:12px;">支持640*1200像素，PNG、JPG格式，小于200KB</p>

                </div>
            </div>
                <!-- 绑定appid -->
            <el-dialog
                title="您还未授权公众号，是否现在授权？"
                :visible.sync="dialogVisible"
                size="tiny">
                <div>*授权公众号后才可支持活动在微信端发布参与，授权后，用于授权的公众号将无法与其他三方应用平台对接</div>
                <div class="input-box">
                        <div class="title">授权绑定：</div>
                        <el-input class="element-input" placeholder="请输入内容" v-model="wxForm.app_id">
                            <template slot="prepend">APP_ID</template>
                        </el-input>
                        <el-input class="element-input" placeholder="请输入内容" v-model="wxForm.app_secret">
                            <template slot="prepend">SecurityKey</template>
                        </el-input>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="handleClose">确 定</el-button>
                </span>
            </el-dialog>
            <!-- 开启分享 -->
            <div class="form-item-box clearfix">
                <div class="form-item-left code-left title-channel">开启分享:</div>
                <div class="form-item-right code-switch">
                    <el-switch
                        v-model="$store.state.shares.shareSwitch"
                        active-color="#64bd63"
                        inactive-color="#ffffff">
                    </el-switch>
                </div>
            </div>
            <div v-show="$store.state.shares.shareSwitch">
                <div class="form-item-box clearfix">
                    <div class="form-item-left require-item">分享图标:</div>
                    <div class="form-item-right add-banner">
                        <div class="upload-img-list">
                            <p  v-show="!$store.state.shares.shareIcon" @click="clickUpAttr(2)" >
                                <input type="file" 
                                    @change='addImgEvent'
                                    accept="image/png, image/jpeg, image/jpg">
                                    <img v-show="ImportCodeLoading" class="load-gif" src="./../../../assets/img/qr_code.gif">
                            </p>
                            <p v-show="$store.state.shares.shareIcon" class="p_img">
                                <img :src="$store.state.shares.shareIcon" />
                                <i class="fa fa-times" 
                                aria-hidden="true"
                                v-show="$store.state.shares.shareIcon"  @click="cancelBanner(2)"></i>
                            </p>
                        </div>
                        <p style="font-size:12px;">支持640*1200像素，PNG、JPG格式，小于200KB</p>
                    </div>
                </div>
                <div class="form-item-box clearfix">
                    <div class="form-item-left require-item">分享标题:</div>
                    <div class="form-item-right">
                        <input type="text" v-model="$store.state.shares.shareTitle" placeholder="最多32个字">
                    </div>
                </div>
                <div class="form-item-box clearfix">
                    <div class="form-item-left require-item">分享文案:</div>
                    <div class="form-item-right textarea-box">
                        <textarea placeholder="最多50个字" v-model="$store.state.shares.shareContent"></textarea>
                    </div>
                </div>
            </div>	
        </div>

    </div>
</template>
<script>
	import { baseImgPath } from './../../../config/env'
	import * as api from './../../../api/api';
	import Vue from 'vue'
	import { Message,Loading} from 'element-ui';    
	export default {
		data(){
			return {
                ImportCodeLoading:false, //上传图片
                // 微信授权绑定
				wxForm:{
					app_id:'',
					app_secret:'',
					type:"normal"
				},
                dialogVisible: false,  //绑定appid弹出框
				isWXAppId:false,   //是否绑定appid

                clickUpLoadImg:null, 
            }
		},
		watch:{
			
		},
		mounted(){
		    this.getIsWXAppId();  //判断是否绑定微信appid
		},  
        methods: {
            //开启分享到微信
			openImplantWx(val){
				if(!this.isWXAppId){
					this.$store.state.shares.implantWechat=false;
					this.dialogVisible=true;  //打开绑定微信appid
				}
			},
			//判断是否绑定微信appid
			getIsWXAppId(){
				let vm = this;
				api.isWechatId().then(res=>{
					res.data.data.length==0?vm.isWXAppId=false:vm.isWXAppId=true
				}).catch(err=>{
                    vm.httpStatusCode(err);
                });
			},
            handleClose() {
				let vm = this;
				api.postWxAppId(vm.wxForm).then(res=>{
					if(res.data.code==200){
						vm.$message({
							message: '绑定成功',
							type: 'success'
						});
						vm.dialogVisible = false;
						vm.getIsWXAppId(); 

					}
				}).catch(err=>{
                    vm.httpStatusCode(err);
                })  
			},
           //删除选择的图片
			cancelBanner(value){
				if (value === 1) {
					this.$store.state.shares.codeImg = '';
				}else{
					this.$store.state.shares.shareIcon = '';
				}
			},
			clickUpAttr(val){
				this.clickUpLoadImg=val;
			},
			//上传图片
			addImgEvent(event){
				var vm = this;
				vm.ImportCodeLoading=true;
	            var img1 = event.target.files[0];
				//生成临时图片路径
                var temSrc = URL.createObjectURL(img1);
	            var size = img1.size/1024;
				if(size>200){
					vm.ImportCodeLoading=false;
					vm.$message({
					showClose: true,
					type: 'error',
					message: '图片大小不能大于200KB'
					}); 
					return false;  
				}
				var _img = new Image();
        		_img.onload = function  () { 
        			var imgWidth = _img.width,
        				imgHeight = _img.height; 
					if (imgWidth !=imgHeight) {
						vm.ImportCodeLoading=false;
						vm.$message({
							showClose: true,
							type: 'error',
							message: '请上传尺寸为1:1的图片'
						}); 
						return false;
					};
					
					let formdata = new FormData();
					formdata.append('upfile', img1);
        			if (vm.clickUpLoadImg ==1) {  
				        api.uploadPrizeImg(formdata).then(res => {
                            if(res.data.code==0){
                                vm.$message({
                                    message: '上传成功',
                                    type: 'success'
                                }); 
                                vm.ImportCodeLoading=false;
                                vm.$store.state.shares.codeImg = res.data.result;
                            }
							
				        }).catch(err=>{
							vm.httpStatusCode(err); 
							vm.ImportCodeLoading=false;
						})  
        			}else{  
				        api.uploadPrizeImg(formdata).then(res => {
                            if(res.data.code==0){
                               vm.$message({
								message: '上传成功',
								type: 'success'
                                }); 
                                vm.ImportCodeLoading=false;
                                vm.$store.state.shares.shareIcon = res.data.result; 
                            }
							
				        }).catch(err=>{
							vm.httpStatusCode(err); 
							vm.ImportCodeLoading=false;
						}) 
					} 
					setTimeout(function  () {
			        	URL.revokeObjectURL(temSrc);
			        },100);
				}
				_img.src = temSrc;
			}
        }
	}
</script>
<style>
	/* 修改输入框样式 */
	.pick-date-box .el-input__inner{
		height: 34px;
		box-sizing: border-box;
		border-radius: 0;
		background-color: #f4f8fb;
	    color: #888;
	    border: 1px solid #efefef;
	    box-shadow: none;
	    font-size: 12px;
	    width: 100%;
        height: 34px;
        padding: 6px 12px;
        box-sizing: border-box;
	}
	.special-item .el-input__inner{
		height: 32px;
		box-sizing: border-box;
		border-radius: 0;
		background-color: #f4f8fb;
	    color: #888;
	    border: 1px solid #efefef;
	    box-shadow: none;
	    font-size: 12px;
	    width: 109px;
        padding: 6px 12px;
        box-sizing: border-box;
	}
	.special-item .el-date-editor i{
		display: none;
	}
	.special-item .el-select .el-input__inner{
		padding-right: 25px;
		width:130px;
	}
	.lotteryNum-box .el-input__inner{
		width:142px;
		box-sizing: border-box;
		border-radius: 0;
		height: 34px;
		font-size: 12px;
	    color: rgb(136, 136, 136);
	    border-color: rgb(239, 239, 239);
	    background-color: rgb(238, 238, 238);
	}
	.tag-box .el-input__inner{
		width:160px;
	}
	.tag-box .el-input{
	}
	.rule-box .ql-container{
		height: 300px;
		background: #f4f8fb;
	}
	.share-switch .el-switch{
		position: relative;
		top:-1px;
	}
	.rule-title .el-switch{
		top:-1px;
		left: 10px;
	}
	.el-switch__label span{
		color:rgba(0,0,0,0);
	}
</style>
<style lang="less" scoped>
	@import '../../../style/setTemplate'; 
    input::-webkit-input-placeholder{
        color:#bbb;
    }
    .list-info{
        font-size:14px;
        color:#666;
        margin:10px 0;
    }
    .upload-img-list p{
        width:100px;
        height: 100px;
        line-height: 98px;
        border: 1px solid #eeeeee;
        margin: 0 10px 20px;
        text-align: center;
        font-size: 30px;
        color: #aaaaaa;
        position: relative; 
        .load-gif{
            position:absolute;
            top:35px;
            left:35px;
            width:25px;
            height:25px;
        }
    }
    .upload-img-list p:first-child{
        position: relative;
    }
    .upload-img-list p:first-child:before{
        content:'+';
    }
    .upload-img-list p input{
        cursor: pointer;
        display: block;
        opacity: 0;
        width:100%;
        height: 100%;
        position: absolute;
        top:0;
        left:0;
    }
    .upload-img-list p:not(:first-child){
        -webkit-background-size: contain;
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
    }
    .upload-img-list .p_img{
        position:relative;
        border:none; 
    }
    .upload-img-list p img{
        width:100%;
        height: 100%;
    }
    .upload-img-list .p_img .fa-times{
        position: absolute;
        top: 0 !important;
        right:-13px;
        font-size: 14px;
        color:#888888;
        cursor: pointer;
    }
    .upload-img-list .p_img .fa-times:hover{
        opacity: 0.8;
    }
</style>